<template>
  <div class="app-container">
    <div class="app-attr">
      <div class="echart-content">
        <div ref="echartsRef" class="echart-dom"></div>
      </div>
      <div class="dispose">
        <el-button type="success" @click="generateGif">保存为GIF</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { baseData } from './modules/baseData'
import { onMounted, ref } from 'vue'
import gifshot from 'gifshot'
const echartData = ref([])
const echartsRef = ref()
onMounted(() => {
  getData()
})

const getData = async () => {
  echartData.value = baseData
  initEcharts()
}
const initEcharts = () => {
  const myEcharts = echarts.init(echartsRef.value)
  const countries = [
    'Finland',
    'France',
    'Germany',
    'Iceland',
    'China'
    // 'Norway',
    // 'Poland',
    // 'Russia',
    // 'United Kingdom'
  ]
  const datasetWithFilters = []
  const seriesList = []
  echarts.util.each(countries, function (country) {
    const datasetId = 'dataset_' + country
    datasetWithFilters.push({
      id: datasetId,
      fromDatasetId: 'dataset_raw',
      transform: {
        type: 'filter',
        config: {
          and: [
            { dimension: 'Month', gte: 1 },
            { dimension: 'Country', '=': country }
          ]
        }
      }
    })
    seriesList.push({
      type: 'line',
      datasetId: datasetId,
      showSymbol: false,
      name: country,
      endLabel: {
        show: true,
        formatter: function (params) {
          return params.value[3] + ': ' + params.value[0]
        }
      },
      labelLayout: {
        moveOverlap: 'shiftY'
      },
      emphasis: {
        focus: 'series'
      },
      encode: {
        x: 'Month',
        y: 'Income',
        label: ['Country', 'Income'],
        itemName: 'Month',
        tooltip: ['Income']
      }
    })
  })
  const option = {
    animationDuration: 10000,
    dataset: [
      {
        id: 'dataset_raw',
        source: echartData.value
      },
      ...datasetWithFilters
    ],
    title: {
      text: '2024电器销售国家汇总趋势图'
    },
    tooltip: {
      order: 'valueDesc',
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      nameLocation: 'middle'
    },
    yAxis: {
      name: 'Income'
    },
    grid: {
      right: 140
    },
    series: seriesList
  }
  myEcharts.setOption(option)
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
}
const generateGif = async () => {
  // geInstanceByDom 获取实例
  const myEcharts = echarts.getInstanceByDom(echartsRef.value)
  const imgArr = []
  for (let i = 0; i < 100; i++) {
    setTimeout(() => {
      // getDataURL: 获取数据的URL
      const img = myEcharts.getDataURL({
        type: 'png',
        backgroundColor: 'white',
        pixelRatio: 2 // 设置分辨率
      })
      imgArr.push(img)
      if (imgArr.length >= 100) {
        gifshot.createGIF(
          {
            gifWidth: 600,
            gifHeight: 400,
            images: imgArr,
            interval: 0.1
          },
          (obj) => {
            if (!obj.error) {
              const image = obj.image
              const a = document.createElement('a')
              a.href = image
              a.download = 'chart.gif'
              a.click()
              // const img = document.createElement('img')
              // img.src = image
              // document.body.appendChild(img)
            }
          }
        )
      }
    }, i * 100)
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f5f5f5;
  height: calc(100vh - 36px);
  padding: 18px;
}
.app-attr {
  padding: 14px 30px 14px 16px;
  background-color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.echart-content {
  width: 600px;
  height: 400px;
  .echart-dom {
    width: 100%;
    height: 100%;
  }
}
.dispose {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
